<template>
    <div>
        <van-button type="primary" v-on:click="handleCommand1">English</van-button>
        <van-button type="success" v-on:click="handleCommand2">中文</van-button>
        <div>
            <!-- <p>本地图标</p> -->
            <svg-icon name="cn" size="128" />
        </div>
        <h2>Vant Button</h2>
        <van-button type="primary">主要按钮</van-button>
        <van-button type="success">成功按钮</van-button>
        <van-button type="default">默认按钮</van-button>
        <van-button type="danger">危险按钮</van-button>
        <van-button type="warning">警告按钮</van-button>
        <div>
            <h1>vue element</h1>
        </div>
        <div>
            <label for="switch-dark">
                <input type="checkbox" id="switch-dark" v-model="isDark" />
                暗黑模式
            </label>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useLocaleStore } from "@/stores"
import { hookI18n } from "@/hooks"
import { useDark, useToggle, useFullscreen } from "@vueuse/core"

const isDark = useDark()

const localeState = useLocaleStore()
const { setLocale } = hookI18n()

const handleCommand1 = () => {
    const command = "en" as LanguageKey
    localeState.languageKey = command
    setLocale(command)
    // window.location.reload();
}

const handleCommand2 = () => {
    const command = "zh-CN" as LanguageKey
    localeState.languageKey = command
    setLocale(command)
}
</script>

<style scoped lang="scss">
label {
    margin: 5px;
    padding: 5px;
    color: red;
}
@media (min-width: 1024px) {
    .test {
        min-height: 100vh;
        display: flex;
        align-items: center;
    }
}
</style>
